<template>
  <section class="home">
    <div class="nav" ><!--三木法则，当navFixed为true的时候执行前者，否则执行后者-->
      <div class="search" :class="navFixed == true ? 'topActive':''" >
        <p class="logo animated" id="logo">JD</p>
        <div class="inp">
          <div class="inp-search">鼠标垫</div>
          <span class="cubeic-search"></span>
        </div>
        <div class="state">
          <router-link tag="p" to="/login" v-if="showLogin">登录</router-link>
          <span v-if="!showLogin" class="cubeic-person"></span>
        </div>
      </div>
      <div class="slide-bg"></div>
    </div>
    <home-swiper class="swiper" :swiper="swiper"/>
    <home-classify :classify="classify"/>
    <div class="banner">
      <img src="@/assets/images/home/banner_g1.jpg"/>
      <img src="@/assets/images/home/banner_g2.jpg"/>
      <img src="@/assets/images/home/banner_g3.jpg"/>
    </div>
    <home-seckill :seckill="seckill"/>
    <home-daily-shopping :daily="daily"/>
    <home-express-news/>
    <home-recommend :recommend="recommend"/>
  </section>
</template>

<script>
import HomeSwiper from './components/Swiper'
import HomeClassify from './components/Classify'
import HomeSeckill from './components/Seckill'
import HomeDailyShopping from './components/DailyShopping'
import HomeExpressNews from './components/ExpressNews'
import HomeRecommend from './components/Recommend'
export default {
  name: 'Home',
  components: {
    HomeSwiper,
    HomeClassify,
    HomeSeckill,
    HomeDailyShopping,
    HomeExpressNews,
    HomeRecommend
  },
  data () {
    return {
      swiper: [],
      classify: [],
      seckill: [],
      daily: [],
      recommend: [],
      showLogin: true,
      navFixed: false
    }
  },
  async created () {
    const home = await this.axios.get('/home')
    // console.log(home.data)
    const data = home
    for (let i in data) {
    }
    this.swiper = data[0]
    this.classify = data[1]
    this.seckill = data[2]
    this.daily = data[3]
    this.$store.commit('setNewsData', data[4])
    this.recommend = data[5]
    // console.log(this.classify)
  },
  mounted () {
    if (localStorage.getItem('token')) { // 判断token是否存在，存在的话登录按钮则不显示，
      this.showLogin = false
    } else {
      this.showLogin = true
    }
  },
  activated () { // activated, deactivated必须和keep-alive联合使用
    console.log('activated页面打开时触发')
    window.addEventListener('scroll', this.handleScroll) // 方法不要加（） addEventListener() 方法，事件监听
  },
  deactivated () {
    console.log('deactivated页面关闭时触发')
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    sss () {
      this.$router.push('/footer/mine')
    },
    handleScroll () {
      let top = document.documentElement.scrollTop // 获取滚动条距离
      // console.log(top)
      let logo = document.getElementById('logo')
      if (top > 1) {
        this.navFixed = true
        logo.classList.add('rubberBand')
      } else {
        this.navFixed = false
        logo.classList.remove('rubberBand')
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .home
    .nav
      background #fff
      width 100%
      height 200px
      overflow hidden
      position relative
      .search
        width 100%
        display flex
        position fixed
        top 0
        left 0
        padding 9px 0
        text-align center
        align-items center
        justify-content center
        z-index 99
        .logo
          width 12%
          font-size 20px
          color #fff
        .inp
          flex 1
          position relative
          .inp-search
            border-radius 20px
            background #fff
            width 100%
            font-size 14px
            padding 9px 0
            color: #757575
            text-align center
          .cubeic-search
            position absolute
            left 3%
            top 20%
            font-size 20px
            color #B7B7B7
        .state
          width 13%
          font-size 13px
          color #fff
          span
            font-size 23px
      .slide-bg
        background-image -webkit-gradient(linear,left bottom,left top,from(#f1503b),color-stop(50%,#c82519))
        background-image -webkit-linear-gradient(bottom,#f1503b,#c82519 50%)
        background-image linear-gradient(0deg,#f1503b,#c82519 50%)
        position absolute
        top 0
        left -25%
        height 145px
        width 150%
        border-bottom-left-radius 100%
        border-bottom-right-radius 100%
    .swiper
      position absolute
      top 5.2%
      z-index 6
    .banner
      width 100%
      display flex
      img
        width 33.33%
  .topActive
    background #e43130
</style>
